<template>
  <a-spin :spinning="myLoading">
    <div class="sp">
      <div class="sp-content">
        <!-- ---------------------- -->
        <div
          class="sp-item"
          v-show="!(isShowLiuCheng || isShowFiles || type === '3')"
        >
          <div class="sp-item-content">
            <div class="sp-item-label">处理方式</div>
            <div class="sp-item-label">
              <span :class="getFontType">{{ getRightType }}</span>
            </div>
          </div>
        </div>
        <!-- ----------------- -->
        <!-- ---------------------- -->
        <div
          class="sp-item"
          v-show="!(isShowLiuCheng || isShowFiles) && showSelNode"
        >
          <div class="sp-item-content">
            <div class="sp-item-label">
              节点选择
              <!-- {{ this.type === "0" ? "节点选择" : "驳回到" }} -->
            </div>
            <div class="sp-item-label">
              <!-- <span class="sp-normal">{{ backToSomeNode }}</span> -->
              <a-radio-group
                v-model="SelectNodeBack"
                @change="freeSelectNodeBackChange"
              >
                <div
                  class="sp-item-radio"
                  v-for="(item, index) in nodeNameMap"
                  :key="index"
                >
                  <a-radio :value="item" :disabled="radioDisabled">
                    {{ nodeNameMapmap[item] }}
                  </a-radio>
                </div>
              </a-radio-group>
            </div>
          </div>
        </div>
        <div
          class="sp-item"
          v-show="selFreeNodeUsers.length && !(isShowFiles || isShowLiuCheng)"
        >
          <div class="sp-item-content">
            <div class="sp-item-label">
              角色选择
              <!-- {{ this.type === "0" ? "节点选择" : "驳回到" }} -->
            </div>
            <div class="sp-item-label">
              <!-- <span class="sp-normal">{{ backToSomeNode }}</span> -->
              <a-checkbox-group
                v-model="checkedUsers"
                name="checkboxgroup"
                :options="selFreeNodeUsers"
                @change="onCheckUsersChange"
              />
            </div>
          </div>
        </div>
        <!-- ----------------- -->
        <!-- ---------------------- -->
        <div
          class="sp-item sp-sp"
          v-show="!(isShowLiuCheng || isShowFiles || type === '3')"
        >
          <div class="sp-sp-r1">
            <div class="sp-item-label">审批语</div>
            <div class="sp-item-label">
              <label for="sp-inputValue" v-if="false">
                <img src="~@/assets/img/file-edit.png" />
                <div class="sp-tz">手写</div>
              </label>
            </div>
          </div>
          <div class="sp-sp-r2">
            <a-textarea
              id="sp-inputValue"
              v-model="inputValue"
              placeholder="请输入"
              :auto-size="{ minRows: 3, maxRows: 3 }"
            />
          </div>
          <div class="sp-sp-upload" v-if="false">
            <a-icon type="plus" class="sp-icon" />
          </div>
        </div>
        <!-- ----------------- -->
        <!-- ---------------------- -->
        <div
          class="sp-item"
          v-show="!(isShowLiuCheng || isShowFiles || type === '3')"
        >
          <div class="sp-item-content">
            <div class="sp-item-label">当前处理人</div>
            <div class="sp-item-label ">
              <span class="sp-normal">{{ getAssigneeNames }}</span>
            </div>
          </div>
        </div>
        <!-- ----------------- -->
        <!-- ---------------------- -->
        <div class="sp-item" @click="showLiucheng(1)">
          <div class="sp-item-content">
            <div class="sp-item-label">
              <img class="sp-liucheng-img" src="~@/assets/img/liucheng.png" />
              <span>流程图</span>
            </div>
            <div class="sp-item-label">
              <!-- 'sp-normal' + isShowLiuCheng ? ' sp-pull-down':'' -->
              <span
                ><a-icon
                  :class="{ 'sp-normal': true, 'sp-pull-down': isShowLiuCheng }"
                  type="right"
              /></span>
            </div>
          </div>
        </div>

        <div class="sp-item" @click="showLiucheng(2)">
          <div class="sp-item-content">
            <div class="sp-item-label">
              <img class="sp-liucheng-img" src="~@/assets/img/fileopen.png" />
              <span>文件</span>
            </div>
            <div class="sp-item-label">
              <!-- 'sp-normal' + isShowLiuCheng ? ' sp-pull-down':'' -->
              <span
                ><a-icon
                  :class="{ 'sp-normal': true, 'sp-pull-down': isShowFiles }"
                  type="right"
              /></span>
            </div>
          </div>
        </div>

        <div class="sp-item1 sp-liucheng" v-show="isShowLiuCheng">
          <pull-to>
            <a-tag
              @click="showLiuchengImg"
              class="sp-liucheng-tag"
              color="#EEEEEE"
            >
              流程图
            </a-tag>
            <div class="sp-liucheng-content">
              <process-log
                v-if="instanceOpinion.length"
                :process-log-data="instanceOpinion"
                @actionClick="actionClick"
              >
                <img slot="dot" :src="require('@/assets/img/pickUp.png')" />
              </process-log>
            </div>
            <a-modal
              v-model="liuchengImgShow"
              ok-text="确认"
              cancel-text="取消"
              :footer="null"
              :centered="true"
              @ok="liuchengImgShow = false"
            >
              <div class="sp-liucheng-imgcontent">
                <img v-if="imgSrc" :src="imgSrc" />
                <img
                  class="liuchengImgLoadingImg"
                  v-else
                  :src="liuchengImgLoadingImg"
                  alt=""
                />
              </div>
            </a-modal>
          </pull-to>
        </div>
        <!--//! 文件 --------- -->

        <div class="sp-item1 sp-liucheng" v-show="isShowFiles">
          <pull-to>
            <file-lists
              :list="fileList"
              @fileClick="actionClick({ file: $event })"
            />
          </pull-to>
        </div>
        <!--//! 文件 --------- -->
      </div>

      <!-- ----------------- -->
      <div
        v-show="!(type === '3')"
        :class="{ 'sp-submit': true, 'sub-loading': subLoading }"
        @click="spSubmit"
      >
        <span
          >{{ isShowLiuCheng || isShowFiles ? "返回" : getRightType }}
        </span>
        <a-icon v-show="subLoading" spin type="reload" />
      </div>
      <div
        @click="isDrawerShow ? (isDrawerShow = false) : ''"
        :class="isDrawerShow ? 'sp-zhezhao' : ''"
      />
      <action-drawer
        class="sp-drawer"
        :title="targetFileNow.fileName || ''"
        :visible="isDrawerShow"
        @close="isDrawerShow = false"
        @actionClick="drawActionClick"
      />
    </div>
  </a-spin>
</template>

<script type="text/ecmascript-6">
import PullTo from 'vue-pull-to';
import ProcessLog from "@/components/processLog/ProcessLog";
import { getInstanceOpinion,
          getCanBackHistoryNodes,
          doAction,
          handleNodeFreeSelectUser,
          status,
          fileView,
          filePage,
          flowImage } from '@/api/detail/index.js'
import { notification } from "ant-design-vue";
import { BASE_URL, KK_URL } from '@/utils/utils.ts'
import { mobileGetFile } from '@/api/table/index.js'
import ddGoBackFilter from "@/views/home/homemixin";

notification.config({
  bottom: '400px',
  duration: 3,
});
import FileLists from './child/fileLists/index.vue'
export default {
    data() {
        return {

            myLoading:false,
            fileList:[],
            subLoading:false,
            SelectNodeBack:"",
            isDrawerShow:false,
            enterpriseName:'',
            matterSxuuid:'',
            isShowLiuCheng:false,
            isShowFiles:false,
            showSelNode:false,
            backToSomeNode: '',       //驳回到某个节点
            type:'',
            instId:'',
            taskId:'',
            nodeId:'',
            assigneeNames:'',
            inputValue:'',
            instanceOpinion:[],
            backSomeNodes:[],
            action:'',
            defId:'',
            nodeIdentitysMap:new Map(),
            nodeNameMap:[],
            nodeNameMap1:{},
            nodeNameMapmap:{},
            selFreeNodeUsers:[],
            checkedUsers:[],
            selCheckedUsers:[],
            formGuid:'',
            selUserKey:'',
            liuchengImgShow:false,
            fileType:"",
            targetFileNow:{},
            imgSrc:'',  //流程图片
            form:{},
            radioDisabled:false,
            liuchengImgLoading:false,
            liuchengImgLoadingImg:require('@/assets/img/loadgin.gif')
        }
    },
    mixins:[ddGoBackFilter],
    methods: {
      showLiuchengImg(){
        this.liuchengImgShow = true
        this.liuchengImgLoading = true
        const obj = {
          'instId': this.instId,
					'defId': this.defId,
					'taskId': this.taskId
        }
        flowImage(obj).then(res=>{
          this.liuchengImgLoading = false

          const blob = new Blob([res.data], {
						type: 'imageType'
          }) // 指定格式为图片
          this.imgSrc = window.URL.createObjectURL(blob)
        })
      },
      filePage(obj){
        const sId = localStorage.getItem('sid')
        const ysSis = Object.freeze(['zxtzysTable','xmtzysTable','xmtzysNextTable','zxtzysNextTable'])
        if (ysSis.indexOf(sId) !== -1) {
          console.log(sId);
          if (sId === 'zxtzysNextTable') {
            obj.type = '036'
          }
          return mobileGetFile(obj)
        }else{
          return filePage(obj)
        }
      },
      // 获取上传的文件
			getFileList(data) {

				return this.filePage({
					guid: this.formGuid,
					formGuid: this.formGuid,
					status: "",
					type: this.fileType
				}).then(res => {
          this.myLoading = false
					if (res.code === 200) {
            if (res.success) {
              const fileLists = res.data
              if (fileLists && fileLists.length) {
                this.fileList = fileLists
              }
              const nameArr = new Map()
              res.data.forEach(item=>{
                item.fileName = item.originName
                if (nameArr.has(item.trueName)) {
                  nameArr.get(item.trueName).push(item)
                }else{
                  nameArr.set(item.trueName,[item])
                }
              })
              data = data.filter(item => item.taskName !== '起草节点')
              data.forEach((item,index) =>{
                const { approverName, assignInfo1 } = item
                const trueName = approverName || assignInfo1
                //用户名匹配文件
                // if (nameArr.has(trueName)) {
                //   item.fileList = nameArr.get(trueName)
                // }
              })
              return data
            }
            return data
          }
          return data
				})
      },
      commonMethods() {
        console.log('11111');
        if (this.form.spendPlan != '' && this.filterJson('执行局', '1')) {
        this.filterJson('执行局', '2')
        } else if (this.form.payManagement != '' && this.filterJson('执行局', '1')) {
        this.filterJson('执行局', '2')
        } else if (this.form.bankAccount != '' && this.filterJson('执行局', '1')) {
        this.filterJson('执行局', '2')
        } else {
        if (this.form.govBuy != '' && this.filterJson('采监科', '1')) {
          this.filterJson('采监科', '2')
        } else {
          if (this.form.nontaxManagement != '' && this.filterJson('综合科', '1')) {
          this.filterJson('综合科', '2')
          } else {
          if (this.form.innerControlReport != '' && this.filterJson('会计科', '1')) {
            this.filterJson('会计科', '2')
          } else {
            if (this.form.transferPay != '' && this.filterJson('预算局', '1')) {
            this.filterJson('预算局', '2')
            } else {
            if (this.filterJson('结束节点', '1')) {
              this.filterJson('结束节点', '2')
            } else {
              this.filterJson('预算局', '2')
            }
            }
          }
          }
        }
        }
      },
      filterJson(data, type) {
        console.log(this.nodeNameMap1);
        for (let key in this.nodeNameMap1) {
        if (this.nodeNameMap1[key].indexOf(data) != -1) {
          if (type == '1') {
          return key
          } else {
          this.SelectNodeBack = key
          // this.changeRadio(key)
          this.freeSelectNodeBackChange({target:{value:key}})
          }
        }
        }
      },
      getPassNode(){
        const obj = {
                "action":this.action,
                "defId":this.defId,
                "nodeId":this.nodeId,
                "taskId":this.taskId
                }
                handleNodeFreeSelectUser(obj).then(res=>{
                  console.log(res);
                  if (res.code === 200 && res.success) {
                    this.showSelNode = res.data.freeSelectNode
                    // if (!res.data.freeSelectNode) {
                    //   return
                    // }
                    const nodeIdentitysMap = res.data.nodeIdentitysMap
                    const nodeNameMap = res.data.nodeNameMap
                    this.nodeNameMap1 = res.data.nodeNameMap
                    const arr = []
                    for(let key in nodeNameMap){
                      arr.push(key)
                    }
                    this.nodeNameMapmap = nodeNameMap
                    this.nodeNameMap = arr
                    this.nodeIdentitysMap = new Map(Object.entries(nodeIdentitysMap || {}))
                    const sid = localStorage.getItem('sid')
                    if (sid === 'ryqxbgTable') {
                      this.radioDisabled = true
                      this.form = localStorage.getItem('tabledata')
                      this.commonMethods()
                    }
                  }
                })
      },
      onCheckUsersChange(users){
        this.selCheckedUsers = users
      },
      freeSelectNodeBackChange(item){
        const key = item.target.value
        const arr = this.nodeIdentitysMap.get(key)
        const brr = [...arr]
        brr.forEach((item,index)=>{
          item.label = item.name
          item.value = Object.assign({},arr[index])
        })
        this.selFreeNodeUsers = brr
        this.selUserKey = key
      },
      drawActionClick(type){
        const { targetFileNow } = this
        const clicKey = type.action.key
        const {fileName,path} = targetFileNow
        const originUrl = `${BASE_URL}/project/downLoad?filePath=${path}&fileName=${fileName}`;
          // 要预览文件的访问地址
          // http://115.239.175.246:5003
					// http://127.0.0.1:8082
        const previewUrl = originUrl + `&fullfilename=${fileName}`;
        if (clicKey === 'open') {
          fileView(targetFileNow);
          // let ip = '115.239.175.246:5004'
          // const onlinePreviewUrl = `http://${ip}/onlinePreview?url=${encodeURIComponent(previewUrl)}`
          // window.open(onlinePreviewUrl);
        }else{
          window.location.href = originUrl
        }
      },
      async spSubmit(){
        if (this.isShowLiuCheng || this.isShowFiles) {
          this.isShowLiuCheng = false
          this.isShowFiles = false
          return
        }
        const { defId, type, inputValue, nodeId, instId, taskId, formGuid, enterpriseName, matterSxuuid } = this
        const typeArr = ['0','1']
        if (inputValue === '') {
          return this.$message.warning('审批语不能为空')
        }
        if (typeArr.indexOf(type) !== -1) {
          if (this.showSelNode) {
            if (!(this.selUserKey || this.SelectNodeBack)) {
              return this.$message.warning('请先选中节点')
            }
          }
          const rules = ['agree','reject']
          const obj = {
            action:rules[Number(type)],
            data: {},
            extendConf: { nodeId: "" },
            nodeId,
            formGuid,
            enterpriseName,
            matterSxuuid,
            instanceId:instId,
            opinion: inputValue,
            taskId:taskId,
            defId,
            destination: this.selUserKey || this.SelectNodeBack || '',  // destination 选中的UserTask7
            nodeUsers: {[this.selUserKey]: this.selCheckedUsers}  //分支（用户对象数组 不选则发所有人）
          }
           /* ----------------------------------------- */

              /* ----------------------------------------- */
              this.subLoading = true
          return doAction(obj).then(res=>{
            if (res.success && res.code === 200) {
              this.dialogClosePage(6)
            }else if(res.code === 0){
              this.$message.warning(res.detail)
            }else{
              this.$message.warning(res.message)
            }
          },err=>{
            this.subLoading = false
            this.$message.error('网络错误')
          })
        }

      },
      clearDialigAndTime(timer,key){
        clearInterval(timer)
          timer = null
          this.$router.replace('/')

          notification.close(key)()
      },
      dialogClosePage(s){
        const key = `open${Date.now()}`;
              let n = s;
              notification.open({
        message: '提交成功',
        duration: 0,
        description:
          `您的操作已成功
          ${n--}秒后页面自动关闭,或点击关闭按钮关闭此页面`,
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary',
                size: 'small',
              },
              on: {
                click: () => notification.close(key),
              },
            },
            '关闭',
          );
        },
        key,
        onClose: close,
      });
      let timer = setInterval(() => {
        if (n <= 0) {
          this.clearDialigAndTime(timer,key)
        }
        notification.open({
        message: '提交成功',
        duration: 0,
        description:
          `您的操作已成功
          ${n--}秒后页面自动关闭,或点击关闭按钮关闭此页面`,
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary',
                size: 'small',
              },
              on: {
                click: () =>  this.clearDialigAndTime(timer,key),
              },
            },
            '关闭',
          );
        },
        key,
        onClose:close,
      });
      }, 1000);
      },
      actionClick({file, record}) {
        // this.$message.success('文件操作')
        this.isDrawerShow = true
        this.targetFileNow = file
        // console.log(file, record)
      },
      async getInstanceOpinion(params){
        if (this.instanceOpinion.length) {
            return
          }
        this.myLoading = true

        await getInstanceOpinion(params).then(res=>{
          if (res.code === 200 && res.success) {
            res.data.forEach(item=>{
              item.assignInfo = item.assignInfo || ''
              const arr = item.assignInfo.split('-')
              if (arr.length > 1) {
                item.assignInfo1 = arr[1]
              }
            })
      /*       const fileList = [
        {
          fileName: '王德发上传你的附件.docx',
          fileSize: '10.82KB',
        },
        {
          fileName: '王德发上传你的附件.docx',
          fileSize: '10.82KB',
        },
      ]
            res.data.forEach(item=>{
              item.fileList = fileList
            }) */
            this.getFileList(res.data).then(res1=>{
              this.instanceOpinion = res1
            })
          }else{
            this.myLoading = false
            this.$message.warning(res.message)
          }
        })
        return new Promise(resolve=>{
          resolve()
        })
      },
      async showLiucheng(type){
        const { instId, taskId } = this
        if (type === 1) {
           this.isShowLiuCheng = !this.isShowLiuCheng
           this.isShowLiuCheng ? this.isShowFiles = false : ''
        }else{
          this.isShowFiles = !this.isShowFiles
          this.isShowFiles ? this.isShowLiuCheng = false : ''
        }

        const params = {
          instId,taskId
        }
        await this.getInstanceOpinion(params)
        // await this.getFileList()
      },
      getCanBackHistoryNodes(data){
        getCanBackHistoryNodes(data).then(res=>{
          if (res.code === 0) {
            return this.$message.warning(res.message)
          }
          const defaultNode = {
            UserTask1:"起草节点"
          }
          const defaultNodeIdentitysMap = {
            UserTask1:[]
          }
          if (res.data === '' || JSON.stringify(res.data) === '{}') {
            this.nodeNameMap = ['UserTask1']
            this.nodeNameMapmap = defaultNode
            this.backToSomeNode = '起草节点'
            this.nodeIdentitysMap = new Map(Object.entries(defaultNodeIdentitysMap))
          }else{
            this.backSomeNodes = res.data
            this.backToSomeNode = '多节点选择'
            const zrr = []
            for(let key in res.data){
              zrr.push(key)
            }
            this.nodeNameMap = zrr
            this.nodeNameMapmap = res.data
            this.nodeIdentitysMap = new Map(Object.entries(res.data))
            // const arr = []
            // for(let key in res.data){
            //   const obj = {
            //     [key]:res.data[key]
            //   }
            //   arr.push(obj)
            // }
            // arr.push({
            //   'UserTask1':'起草节点'
            // })
            // this.backSomeNodes = arr
            // this.SelectNodeBack = arr[0]
          }
        })
      },

      pageInit(){
        const type = sessionStorage.getItem('clickType')
        const enterpriseName = sessionStorage.getItem('enterpriseName')
        const matterSxuuid = sessionStorage.getItem('matterSxuuid')
        const assigneeNames = sessionStorage.getItem('assigneeNames')
        const instId = sessionStorage.getItem('instId')
        const taskId = sessionStorage.getItem('taskId')
        const nodeId = sessionStorage.getItem('nodeId')
        const defId = sessionStorage.getItem('defId')
        const formGuid = sessionStorage.getItem('formGuid')
        const fileType = sessionStorage.getItem('fileType')
        const rules = ['agree','reject']
        const typeArr = ['0','1']
        if (typeArr.indexOf(type) !== -1){
          this.action = rules[Number(type)]
        }
        const isNotValue = Object.freeze({
          matterSxuuid,
          enterpriseName,
          fileType,
          nodeId,
          formGuid,
          defId,
          assigneeNames,
          instId,
          taskId
        })
        for(const key in isNotValue){
          if (Object.prototype.hasOwnProperty.call(isNotValue,key)) {
            if (isNotValue[key]) {
              this[key] = isNotValue[key]
            }
          }
        }



        if (type) {
            this.type = type
            if (taskId) {
              if (type === '0') {
                this.getPassNode()
              }else if(type === '1'){
                this.getCanBackHistoryNodes({taskId})
              }
              // this.getCanBackHistoryNodes({taskId})
              // {extendConf":{"nodeId":""},"nodeId":"UserTask3","taskId":"421507531229626377"}

            }
        }else{
            this.$message.warning('你刚刚点了啥？')
            setTimeout(() => {
                this.$router.go(-1)
            }, 500);
        }

        const openLiuCheng = sessionStorage.getItem('openLiuCheng')
        if (openLiuCheng === '1') {
          this.showLiucheng(1)
        }
      }

    },

    created() {
        const spStatus = localStorage.getItem('spStatus')
        if (spStatus === '2') {
          localStorage.setItem('spStatus',1)
          this.$router.go(-1)
        }
        this.pageInit()
    },
    computed:{
        getAssigneeNames(){
          const {assigneeNames} =this
          return assigneeNames.replace(/\[用户\]/g,'')
        },
        getFontType(){
            const type = this.type
            const obj = {
                '0':'sp-success',
                '1':'sp-warning',
                '2':'sp-danger'
            }
            return obj[type] || 'sp-??'
        },

        getRightType(){
            const type = this.type
            const obj = {
                '0':'通过',
                '1':'驳回',
                '2':'废弃'
            }
            return obj[type] || '??'
        }
    },
    components: {
        PullTo,
        ProcessLog,
        FileLists
    },
    destroyed() {
      sessionStorage.setItem('openLiuCheng', 0)
    },
}
</script>

<style lang="less" scoped>
@import "~@/components/style/default.less";
@import "~@/views/home/home-userinfo/mixins.less";
@fs: 17px;
.sp-item {
  font-size: @fs;
  margin: 7px 0;
  background-color: #fff;
  .sp-item-content {
    padding: 13px 12px;
    display: flex;
    justify-content: space-between;
  }
  .sp-item-label {
    max-width: 60%;
    font-weight: 500;
    color: #333333;
    > div {
      text-align: center;
    }
    .sp-item-radio {
      margin: 7px 0;
      position: relative;
      left: 12px;
    }
  }
  .sp-liucheng-img {
    width: 18px;
    height: 18px;
    position: relative;
    bottom: 3px;
    margin-right: 4px;
  }
}
.sp-sp {
  position: relative;
  height: 134px;
  padding: 13px 0;
  .sp-sp-r1 {
    display: flex;
    justify-content: space-between;
  }
  .sp-item-label {
    padding: 0 12px;
  }
  img {
    width: 25px;
    height: 23px;
    position: relative;
    left: 3px;
  }
  .sp-tz {
    position: relative;
    right: 2px;
    font-size: 14px;
    color: @default-text-999-color;
  }
  .sp-sp-r2 {
    position: absolute;
    bottom: 10px;
    margin-left: 2px;
    width: 310px;
    height: 80px;
  }
  .sp-sp-upload {
    position: absolute;
    bottom: 10px;
    right: 12px;
    width: 45px;
    height: 45px;
    background-color: #f6f6f6;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    .sp-icon {
      color: @default-text-999-color;
    }
  }
  .ant-input {
    border: none;
    outline: none;
    background-color: #ededee00;
  }
  .ant-input-affix-wrapper .ant-input:focus {
    border: none;
    box-shadow: none;
  }
  .ant-input:focus {
    box-shadow: none;
  }
}
.sp-warning {
  color: #edc577;
}
.sp-success {
  color: #81e093;
}
.sp-danger {
  color: #eb7575;
}
.sp-normal {
  color: @default-text-999-color;
}
.sp {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  .sp-content {
    height: calc(100% - 49px);
  }
  .sp-submit {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 49px;
    background-color: #3296fa;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.49);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #ffffff;
    font-size: @fs;
    &:active {
      transition: 0.3s linear;
      > span {
        position: relative;
        top: 1px;
      }
    }
  }
  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    font-size: @fs;
    color: @default-text-999-color;
  }
  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: @fs;
    color: @default-text-999-color;
  }
  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: @fs;
    color: @default-text-999-color;
  }
  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-size: @fs;
    color: @default-text-999-color;
  }
  .sp-pull-down {
    @rote-deg: 90deg;
    transition: 0.3s linear;
    transform: rotate(@rote-deg);
    -ms-transform: rotate(@rote-deg); /* IE 9 */
    -moz-transform: rotate(@rote-deg); /* Firefox */
    -webkit-transform: rotate(@rote-deg); /* Safari 和 Chrome */
    -o-transform: rotate(@rote-deg); /* Opera */
  }
  .sp-liucheng {
    background-color: #fff;
    height: calc(100% - 49px - 23px);
    overflow: hidden;
    .sp-liucheng-tag {
      margin: 14px 0px;
      margin-left: 12px;
      font-size: 12px;
      color: @default-text-color;
      width: 53px;
      height: 19px;
      border-radius: 10px;
      .center(vc);
    }
    .sp-liucheng-content {
      margin-top: 30px;
    }
  }
  .sp-drawer {
    position: relative;
    z-index: 99;
  }
  .sp-zhezhao {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.267);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 88;
  }
}
/deep/ .ant-modal-body {
  padding: 12px;
}
.sp-liucheng-imgcontent {
  overflow-y: scroll;
  height: 85vh;
  outline: 1px solid black;
}
.sub-loading {
  pointer-events: none;
  background-color: #69b7ff !important;
}
.liuchengImgLoadingImg {
  width: 121px;
  height: 131px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
